<style lang="less">
    .ivu-col{
        background-color: orange;
        height: 30px;
    }
    [date-align]{
        height: 80px;
        background: green;
    }
</style>
<template>
    <div>

        <!-- 
            使用row在水平方向创建一行
            将一组col插入在row中
            在每个col中，键入自己的内容
            通过设置col的span参数，指定跨越的范围，其范围是1到24
            每个row中的col总和应该为24
            offset 栅格左侧的间隔格数，间隔内不可以有栅格

            xs	<768px 响应式栅格，可为栅格数或一个包含其他属性的对象
            sm	≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象
            md	≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象
            lg	≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象
         -->

        <Row :gutter="16">
            <Col span="8">1</Col>
            <Col span="6">2</Col>
        </Row>
        <br>

        <!-- 水平布局 order排序   -->
        <Row type="flex">
            <Col span="4" order="4">01</Col>
            <Col span="4" order="3">02</Col>
            <Col span="4" order="2">03</Col>
            <Col span="4" order="1">04</Col>
        </Row>
        <br>
        <Row type="flex" justify="center">
            <Col span="4" >01</Col>
            <Col span="4" >02</Col>
            <Col span="4" >03</Col>
            <Col span="4" >04</Col>
        </Row>
        <br>
        <Row type="flex" justify="end">
            <Col span="4" >01</Col>
            <Col span="4" >02</Col>
            <Col span="4" >03</Col>
            <Col span="4" >04</Col>
        </Row>
        <br>

        <!-- 垂直布局 -->
        <Row type="flex" date-align="1" align="top">
            <Col span="4" >01</Col>
            <Col span="4" >02</Col>
            <Col span="4" >03</Col>
            <Col span="4" >04</Col>
        </Row>
        <br>
        <Row type="flex" date-align="1" align="middle">
            <Col span="4" >01</Col>
            <Col span="4" >02</Col>
            <Col span="4" >03</Col>
            <Col span="4" >04</Col>
        </Row>
        <br>
        <Row type="flex" date-align="1" align="bottom">
            <Col span="4" >01</Col>
            <Col span="4" >02</Col>
            <Col span="4" >03</Col>
            <Col span="4" >04</Col>
        </Row>
        
    </div>
</template>